Skip to content

70 feat implementere oversikt over tidligere handlelister #76

Jump to bottom
Merged
merged 7 commits into from
Oct 22, 2026
Merged

70 feat implementere oversikt over tidligere handlelister #76

merged 7 commits into from
Oct 22, 2026
+739 −23

Conversation

taraa
Copy link
Member

@taraa taraa commented Oct 20, 2026 •
edited
Loading

Beskrivelse

Implementerer en oversiktsside for tidligere fullførte handlelister, basert på Figma-designet «Tidligere handlelister» (FIG. 10).

Formålet er å gjøre det enkelt for brukeren å finne igjen tidligere innkjøp gjennom søk, sortering og gruppering etter måned og år.

Relaterte issues

Endringer gjort

  • Opprettet PreviousListsPage.tsx, PreviousListRow.tsx og tilhørende CSS.
  • Viser fullførte handlelister gruppert etter måned og år.
  • Viser dato, listenavn, antall produkter, totalt antall varer og estimert totalpris.
  • Implementert søk etter listenavn og sortering etter dato (nyeste/eldste først).
  • Implementert «Last inn flere» og «Last inn færre» med 10 lister om gangen.
  • Viser hvor mange lister som er synlige av totalt antall søkeresultater.
  • Lagrer søk, sortering og antall viste lister i localStorage, slik at innstillingene beholdes ved navigasjon og oppdatering.
  • Gjort fanene «Aktive» og «Tidligere» klikkbare.
  • Gjenbrukt designvariabler fra theme.css, med tilpasninger for ulike skjermstørrelser.

Testing

  • npm run build fullført uten feil.
  • Søk og sortering implementert.
  • Paginering med 10 lister om gangen implementert.
  • Lagring av brukerinnstillinger med localStorage implementert.
  • Endelig kontroll av mobilvisning og lys/mørk modus.

Gjenstående arbeid

Design

Implementasjonen tar utgangspunkt i Figma-designet «Tidligere handlelister» (FIG. 10).
Lightmode - nyeste først
image

Darkmode - eldtse først
image

Lightmode - eldste først
image

Lasting inn av flere
image

Lasting inn av flere - Last inn færre
image

Mobilvisning
image
image

@taraa taraa requested a review from a team as a code owner October 20, 2026 16:28
@ingrihka
Copy link
Member

Fin PR! Søk, sortering, paginering og lagring i localStorage fungerer bra, og den ser riktig ut i både lys og mørk modus 👏

1. Konflikt med dev
#76 og #77 har begge endret ShoppingListsPage.tsx og .css, så git vet ikke hvilken versjon den skal bruke. Begge skal være med:

  • tsx: slå sammen importene til
    import { useEffect, useState } from "react";
    import { Link, useNavigate } from "react-router";
  • css: behold både __tab-reglene og __sort-reglene. NB: konfliktmarkøren kutter midt i .shopping-lists-page__tab:focus-visible {, så den regelen trenger sin egen outline, outline-offset og } før __sort starter.

2. Bruk de felles mock-dataene (etter at #58 er merget)
Nå har historikken sine egne mock-lister inne i fila. Detaljsiden min for handlede lister (#59) henter listene fra shoppingListMockData.ts. Når man klikker på en rad i historikken, går man til /lists/{id}, og hvis den listen ikke finnes i den felles fila, viser siden «Fant ikke handlelisten».

Forslag: når #58 er merget, merger du dev inn i branchen din og henter listene derfra i stedet:
import { mockLists } from "./shoppingListMockData";
const previousLists = mockLists.filter((list) => list.status === "COMPLETED");

Da hører hver rad i historikken til en liste som detaljsiden kan åpne. Vil du ha flere handlede lister, legger du dem til i shoppingListMockData.ts. Der ligger allerede «Ukeshandel» (id 11) som eksempel.

@ingrihka
Copy link
Member

#58 er merget 😊 Merger du dev inn i #76, får du shoppingListMockData.ts, og historikken kan hente listene derfra.

@ingrihka ingrihka mentioned this pull request Oct 21, 2026
Merged
8 tasks
lindeav
lindeav approved these changes Oct 22, 2026
View reviewed changes
Copy link
Member

@lindeav lindeav left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bra! Har ikke noe å kommentere på:))

@lindeav lindeav merged commit a3a4d49 into dev Oct 22, 2026
@lindeav lindeav deleted the 70-feat-implementere-oversikt-over-tidligere-handlelister branch October 22, 2026 14:01
Sign in to join this conversation on GitHub.
Reviewers

@lindeav lindeav lindeav approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@taraa @ingrihka @lindeav